<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Tckapco">
    
    <title>
        
            ES6-Symbol |
        
        Tckapco
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"theboat.gitee.io","root":"/","language":"en"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":true},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Tckapco
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                LINKS
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">LINKS</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">ES6-Symbol</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Tckapco</span>
                        
                            <span class="author-label">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-14 10:13:01</span>
        <span class="mobile">2021-05-14 10:13</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/JavaScript/">JavaScript</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/JavaScript/ES6/">ES6</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/Symbol/">Symbol</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.7k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>7 Mins</span>
        </span>
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="一、基础"><a href="#一、基础" class="headerlink" title="一、基础"></a>一、基础</h1><p>ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。</p>
<p><strong>1. Symbol 值通过 Symbol 函数生成，使用 typeof，结果为 “symbol”</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var s &#x3D; Symbol();</span><br><span class="line">console.log(typeof s); &#x2F;&#x2F; &quot;symbol&quot;</span><br></pre></td></tr></table></figure>

<p><strong>2. Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。</strong></p>
<p><strong>3. instanceof 的结果为 false</strong>（未理解）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var s &#x3D; Symbol(&#39;foo&#39;);</span><br><span class="line">console.log(s instanceof Symbol); &#x2F;&#x2F; false</span><br></pre></td></tr></table></figure>

<blockquote>
<p>5.26理解：instanceof是基于原型链上的查找，但Symbol函数不能使用new命令，不是对象</p>
</blockquote>
<p><strong>4. Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var s1 &#x3D; Symbol(&#39;foo&#39;);</span><br><span class="line">console.log(s1); &#x2F;&#x2F; Symbol(foo)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 可以通过description来访问描述</span><br><span class="line">s1.description &#x2F;&#x2F; &quot;foo&quot;</span><br></pre></td></tr></table></figure>

<p><strong>5. 如果 Symbol 的参数是一个对象，就会调用该对象的 toString 方法，将其转为字符串，然后才生成一个 Symbol 值。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const obj &#x3D; &#123;</span><br><span class="line">  toString() &#123;</span><br><span class="line">    return &#39;abc&#39;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">const sym &#x3D; Symbol(obj);</span><br><span class="line">console.log(sym); &#x2F;&#x2F; Symbol(abc)</span><br></pre></td></tr></table></figure>

<p><strong>6. Symbol 函数的参数只是表示对当前 Symbol 值的描述，相同参数的 Symbol 函数的返回值是不相等的。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 没有参数的情况</span><br><span class="line">var s1 &#x3D; Symbol();</span><br><span class="line">var s2 &#x3D; Symbol();</span><br><span class="line"></span><br><span class="line">console.log(s1 &#x3D;&#x3D;&#x3D; s2); &#x2F;&#x2F; false</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 有参数的情况</span><br><span class="line">var s1 &#x3D; Symbol(&#39;foo&#39;);</span><br><span class="line">var s2 &#x3D; Symbol(&#39;foo&#39;);</span><br><span class="line"></span><br><span class="line">console.log(s1 &#x3D;&#x3D;&#x3D; s2); &#x2F;&#x2F; false</span><br></pre></td></tr></table></figure>

<p><strong>7. Symbol 值不能与其他类型的值进行运算，会报错。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var sym &#x3D; Symbol(&#39;My symbol&#39;);</span><br><span class="line"></span><br><span class="line">console.log(&quot;your symbol is &quot; + sym); &#x2F;&#x2F; TypeError: can&#39;t convert symbol to string</span><br></pre></td></tr></table></figure>

<p><strong>8. Symbol 值可以显式转为字符串。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var sym &#x3D; Symbol(&#39;My symbol&#39;);</span><br><span class="line"></span><br><span class="line">console.log(String(sym)); &#x2F;&#x2F; &#39;Symbol(My symbol)&#39;</span><br><span class="line">console.log(sym.toString()); &#x2F;&#x2F; &#39;Symbol(My symbol)&#39;</span><br></pre></td></tr></table></figure>

<p><strong>9. Symbol 值可以作为标识符，用于对象的属性名，可以保证不会出现同名的属性。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">var mySymbol &#x3D; Symbol();</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 第一种写法</span><br><span class="line">var a &#x3D; &#123;&#125;;</span><br><span class="line">a[mySymbol] &#x3D; &#39;Hello!&#39;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 第二种写法</span><br><span class="line">var a &#x3D; &#123;</span><br><span class="line">  [mySymbol]: &#39;Hello!&#39;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 第三种写法</span><br><span class="line">var a &#x3D; &#123;&#125;;</span><br><span class="line">Object.defineProperty(a, mySymbol, &#123; value: &#39;Hello!&#39; &#125;);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 以上写法都得到同样结果</span><br><span class="line">console.log(a[mySymbol]); &#x2F;&#x2F; &quot;Hello!&quot;</span><br></pre></td></tr></table></figure>

<p><strong>10. Symbol 作为属性名，该属性不会出现在 for…in、for…of 循环中，也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回。但是，它也不是私有属性，有一个 Object.getOwnPropertySymbols 方法，可以获取指定对象的所有 Symbol 属性名。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var obj &#x3D; &#123;&#125;;</span><br><span class="line">var a &#x3D; Symbol(&#39;a&#39;);</span><br><span class="line">var b &#x3D; Symbol(&#39;b&#39;);</span><br><span class="line"></span><br><span class="line">obj[a] &#x3D; &#39;Hello&#39;;</span><br><span class="line">obj[b] &#x3D; &#39;World&#39;;</span><br><span class="line"></span><br><span class="line">var objectSymbols &#x3D; Object.getOwnPropertySymbols(obj);</span><br><span class="line"></span><br><span class="line">console.log(objectSymbols);</span><br><span class="line">&#x2F;&#x2F; [Symbol(a), Symbol(b)]</span><br></pre></td></tr></table></figure>

<p><strong>11. 如果我们希望使用同一个 Symbol 值，可以使用 Symbol.for。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var s1 &#x3D; Symbol.for(&#39;foo&#39;);</span><br><span class="line">var s2 &#x3D; Symbol.for(&#39;foo&#39;);</span><br><span class="line"></span><br><span class="line">console.log(s1 &#x3D;&#x3D;&#x3D; s2); &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>

<p><strong>12. Symbol.keyFor 方法返回一个已登记的 Symbol 类型值的 key。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var s1 &#x3D; Symbol.for(&quot;foo&quot;);</span><br><span class="line">console.log(Symbol.keyFor(s1)); &#x2F;&#x2F; &quot;foo&quot;</span><br><span class="line"></span><br><span class="line">var s2 &#x3D; Symbol(&quot;foo&quot;);</span><br><span class="line">console.log(Symbol.keyFor(s2) ); &#x2F;&#x2F; undefined</span><br></pre></td></tr></table></figure>



<h1 id="二、应用场景"><a href="#二、应用场景" class="headerlink" title="二、应用场景"></a>二、应用场景</h1><p><strong>1：当做对象属性key来使用，但是注意用例中4种方式是无法获取到以Symbol为key的属性的。</strong></p>
<p><strong>用例</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">let s_name&#x3D; Symbol(&quot;name&quot;);</span><br><span class="line">let obj&#x3D; &#123;</span><br><span class="line">[s_name]: &quot;lle&quot;,</span><br><span class="line">  age: 18,</span><br><span class="line">  title: &quot;Engineer&quot;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">console.log(Object.keys(obj)); &#x2F;&#x2F; [&quot;age&quot;, &quot;title&quot;]</span><br><span class="line"></span><br><span class="line">for(let key in obj) &#123;</span><br><span class="line">  console.log(key); &#x2F;&#x2F; 输出age, title</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">console.log(Object.getOwnPropertyNames(obj)); &#x2F;&#x2F; [&quot;age&quot;, &quot;title&quot;]</span><br><span class="line"></span><br><span class="line">JSON.stringify(obj); &#x2F;&#x2F; &#123;&quot;age&quot;:18,&quot;title&quot;:&quot;Engineer&quot;&#125;</span><br></pre></td></tr></table></figure>

<p>以上这些常规的方式都是无法获取到的</p>
<p>如果要获取可以用个以下三种方式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">obj[s_name]；&#x2F;&#x2F; lle</span><br><span class="line"></span><br><span class="line">Object.getOwnPropertySymbols(obj); &#x2F;&#x2F; [Symbol(name)]</span><br><span class="line"></span><br><span class="line">Reflect.ownKeys(obj); &#x2F;&#x2F; [&quot;age&quot;, &quot;title&quot;, Symbol(name)]</span><br></pre></td></tr></table></figure>

<p><strong>Symbol.iterator</strong></p>
<p>对象的<code>Symbol.iterator</code>属性，指向该对象的默认遍历器方法(ES6阮一峰，未理解)</p>
<p><strong>例子</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>.prototype[<span class="built_in">Symbol</span>.iterator] = <span class="function"><span class="keyword">function</span>*(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">let</span> num = <span class="built_in">this</span>.valueOf();</span><br><span class="line">  <span class="keyword">while</span> (i &lt; num) &#123;</span><br><span class="line">    <span class="keyword">yield</span> i++;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log([..<span class="number">.5</span>]) <span class="comment">// [0, 1, 2, 3, 4]</span></span><br></pre></td></tr></table></figure>

<p>上面代码中，先定义了<code>Number</code>对象的遍历器接口，扩展运算符将<code>5</code>自动转成<code>Number</code>实例以后，就会调用这个接口，就会返回自定义的结果。</p>
<p>对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arrayLike = &#123;</span><br><span class="line">  <span class="string">&#x27;0&#x27;</span>: <span class="string">&#x27;a&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;1&#x27;</span>: <span class="string">&#x27;b&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;2&#x27;</span>: <span class="string">&#x27;c&#x27;</span>,</span><br><span class="line">  length: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// TypeError: Cannot spread non-iterable object.</span></span><br><span class="line"><span class="keyword">let</span> arr = [...arrayLike];</span><br></pre></td></tr></table></figure>

<p>知乎：Symbol最大用处是给其他复合类型部署了Symbol.iterator迭代器，提供统一的遍历接口，直接用感觉用不到</p>
<blockquote>
<p>个人理解：Symbol见得最多的场景就是Symbol.iterator，部署迭代器，提供遍历接口，如上面给Number定义遍历器的例子，因为Symbol代表独一无二的，因此定义时就避免了冲突的现象</p>
</blockquote>
<h1 id="三、模拟实现"><a href="#三、模拟实现" class="headerlink" title="三、模拟实现"></a>三、模拟实现</h1><p>参考讶羽</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">(function() &#123;</span><br><span class="line">    var root &#x3D; this;</span><br><span class="line"></span><br><span class="line">    var generateName &#x3D; (function()&#123;</span><br><span class="line">        var postfix &#x3D; 0;</span><br><span class="line">        return function(descString)&#123;</span><br><span class="line">            postfix++;</span><br><span class="line">            return &#39;@@&#39; + descString + &#39;_&#39; + postfix</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)()</span><br><span class="line"></span><br><span class="line">    var SymbolPolyfill &#x3D; function Symbol(description) &#123;</span><br><span class="line"></span><br><span class="line">        if (this instanceof SymbolPolyfill) throw new TypeError(&#39;Symbol is not a constructor&#39;);</span><br><span class="line"></span><br><span class="line">        var descString &#x3D; description &#x3D;&#x3D;&#x3D; undefined ? undefined : String(description)</span><br><span class="line"></span><br><span class="line">        var symbol &#x3D; Object.create(&#123;</span><br><span class="line">            toString: function() &#123;</span><br><span class="line">                return this.__Name__;</span><br><span class="line">            &#125;,</span><br><span class="line">            valueOf: function() &#123;</span><br><span class="line">                return this;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        Object.defineProperties(symbol, &#123;</span><br><span class="line">            &#39;__Description__&#39;: &#123;</span><br><span class="line">                value: descString,</span><br><span class="line">                writable: false,</span><br><span class="line">                enumerable: false,</span><br><span class="line">                configurable: false</span><br><span class="line">            &#125;,</span><br><span class="line">            &#39;__Name__&#39;: &#123;</span><br><span class="line">                value: generateName(descString),</span><br><span class="line">                writable: false,</span><br><span class="line">                enumerable: false,</span><br><span class="line">                configurable: false</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">        return symbol;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    var forMap &#x3D; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">    Object.defineProperties(SymbolPolyfill, &#123;</span><br><span class="line">        &#39;for&#39;: &#123;</span><br><span class="line">            value: function(description) &#123;</span><br><span class="line">                var descString &#x3D; description &#x3D;&#x3D;&#x3D; undefined ? undefined : String(description)</span><br><span class="line">                return forMap[descString] ? forMap[descString] : forMap[descString] &#x3D; SymbolPolyfill(descString);</span><br><span class="line">            &#125;,</span><br><span class="line">            writable: true,</span><br><span class="line">            enumerable: false,</span><br><span class="line">            configurable: true</span><br><span class="line">        &#125;,</span><br><span class="line">        &#39;keyFor&#39;: &#123;</span><br><span class="line">            value: function(symbol) &#123;</span><br><span class="line">                for (var key in forMap) &#123;</span><br><span class="line">                    if (forMap[key] &#x3D;&#x3D;&#x3D; symbol) return key;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            writable: true,</span><br><span class="line">            enumerable: false,</span><br><span class="line">            configurable: true</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    root.SymbolPolyfill &#x3D; SymbolPolyfill;</span><br><span class="line"></span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<h1 id="四、参考"><a href="#四、参考" class="headerlink" title="四、参考"></a>四、参考</h1><p>阮一峰：<a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/symbol">https://es6.ruanyifeng.com/#docs/symbol</a></p>
<p>冴羽：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903619544760328">https://juejin.cn/post/6844903619544760328</a></p>
<p>ES6 symbol类型的理解和应用场景归纳：<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/9805729c859d">https://www.jianshu.com/p/9805729c859d</a></p>
<h1 id="五、总结"><a href="#五、总结" class="headerlink" title="五、总结"></a>五、总结</h1><p>Symbol是ES6的特性，它代表创建后独一无二且不可变的数据类型</p>
<p>最多的应用场景是Symbol.iterator，部署迭代器，提供遍历接口，如上面给Number定义遍历器的例子，因为Symbol代表独一无二的，因此定义时就避免了冲突的现象</p>
<p>其他暂未遇到</p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/Symbol/">#Symbol</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/17/%E5%BC%82%E6%AD%A5%E6%96%B9%E6%A1%88%E2%80%94%E2%80%94Generator/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">异步方案——Generator</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/08/JS%E5%9F%BA%E7%A1%80%E2%80%94%E2%80%94%E4%BD%9C%E7%94%A8%E5%9F%9F&amp;%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">JS基础——作用域&amp;作用域链</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Tckapco</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E5%9F%BA%E7%A1%80"><span class="nav-number">1.</span> <span class="nav-text">一、基础</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">2.</span> <span class="nav-text">二、应用场景</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0"><span class="nav-number">3.</span> <span class="nav-text">三、模拟实现</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E5%8F%82%E8%80%83"><span class="nav-number">4.</span> <span class="nav-text">四、参考</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E6%80%BB%E7%BB%93"><span class="nav-number">5.</span> <span class="nav-text">五、总结</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/dark-light-toggle.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/toc.js"></script>
    
</div>



</body>
</html>
